<template>
  <div>
    <div class="maxBox">
      <!-- 标题组件 -->
      <panel title="商品列表">
        <div class="content">

          <el-table :data="tableData">
            <el-table-column type="expand">
              <template slot-scope="scope">
                
                <el-row>
                  <el-col :span="12">
                    商品ID ： {{scope.row.id}}
                  </el-col>
                  <el-col :span="12">
                    商品名称 ： {{scope.row.name}}
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                    所属分类 ： {{scope.row.category}}
                  </el-col>
                  <el-col :span="12">
                    商品价格 ： {{scope.row.price}}
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                    商品评价 ： {{scope.row.rating}}
                  </el-col>
                  <el-col :span="12">
                    创建时间 ： {{scope.row.ctime |filterTime}}
                  </el-col>
                </el-row>

                 <el-row>
                  <el-col :span="12">
                    商品描述 ： {{scope.row.goodsDesc}}
                  </el-col>
                  <el-col :span="12">
                    创建销量 ： {{scope.row.sellCount}}
                  </el-col>
                </el-row>

              </template>
            </el-table-column>

            <el-table-column prop="name" label="商品名称"></el-table-column>
            <el-table-column prop="category" label="所属分类"></el-table-column>
            <el-table-column prop="price" label="商品价格"></el-table-column>
            <el-table-column prop="imgUrl" label="商品图片">

             <template slot-scope="scope">
               <el-image
                  style="width: 100px; height: 100px"
                  :src="baseUrl+scope.row.imgUrl">
                </el-image>
             </template>

            </el-table-column>
            <el-table-column prop="goodsDesc" label="商品描述"></el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" size="small">编辑</el-button>
                <el-button type="danger" size="small" @click="delSp((scope.row.id))">删除</el-button>
              </template>
            </el-table-column>

          </el-table>

          <!-- 分页器 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>


        </div>
      </panel>
    </div>
  </div>
</template>

<script>
// 导入公共标题组件
import Panel from "../../components/Panel.vue";
import {goodsList ,goodsDel} from '@/api/goods.js'


export default {
  data() {
    return {
      baseUrl:'http://localhost:5000',
      tableData:[],
      pageSize:5,
      currentPage:1,
      total:0,
    };
  },
  // 注册组件
  components: {
    Panel,
  },
  methods:{
    // 点击页码 重新拉取列表
    handleSizeChange(pageSize){
      this.pageSize=pageSize;
      this.getGoodsList();  //点击页码后重新调用 请求刷新列表
    },
    handleCurrentChange(page){
      this.currentPage=page;
      this.getGoodsList();

    },
    // 请求商品列表
   async getGoodsList(){
      let data={
        currentPage:this.currentPage,
        pageSize:this.pageSize,
      };
      let res= await goodsList(data);
      this.total=res.data.total; //把后端的总数据 赋值给自己的total
      this.tableData=res.data.data;
    },

    // 删除商品按钮------------------------------------------------
    delSp(id) {
      //传ID
      this.$confirm("是否确认删除该商品 ？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await goodsDel({ id });
          console.log(res);
          if (res.data.code === 0) {
            //成功删除后 重新请求列表
            this.getGoodsList();
            console.log("被删商品ID：" + res.config.params.id);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },

  created(){
    this.getGoodsList();
  },

    // 过滤器
    filters: {
    // 时间函数
    filterTime(timeStr) {
      let date = new Date(timeStr);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      let h = date.getHours();
      let mini = date.getMinutes();
      let s = date.getSeconds();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;
      h = h < 10 ? "0" + h : h;
      mini = mini < 10 ? "0" + mini : mini;
      s = s < 10 ? "0" + s : s;
      return `${y}-${m}-${d} ${h}:${mini}:${s}`;
    },
  },
};
</script>

<style lang="less" scoped>
.maxBox {
  width: 100%;
  height: 100%;
}
.el-row{
  padding: 7px 59px;
}
</style>